<template>
  <div>
    <div class="header-nav" @click="toHome">
      <i class="iconfont">&#xe650;</i>
    </div>
    <div class="header" v-show="isShow" :style="isOpacity">
      <div class="header-navTit">
        <div @click="toHome">
          <i class="icon_search iconfont"> &#xe650; </i>
        </div>
        <div class="title">
          上海海昌海洋公园
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      // 头部导航透明度
      isOpacity: {
        opacity: 0
      }
    }
  },
  methods: {
    toHome() {
      this.$router.push('/')
    }
  },
  mounted() {
    // 改变this的指向
    const that = this
    // 监听页面滚动一定的距离展示头部
    window.addEventListener('scroll', function() {
      const top = document.documentElement.scrollTop
      if (top > 45) {
        let opacity = top / 130
        opacity = opacity > 1 ? 1 : opacity
        that.isOpacity = { opacity }
        that.isShow = true
      } else {
        that.isShow = false
      }
    })
  }
}
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  .header-navTit {
    height: 0.9rem;
    position: relative;
    width: 100%;
    background-color: #00bcd4;
    display: flex;
    align-items: center;
    justify-content: center;
    .title {
      color: white;
      font-size: 0.4rem;
    }
    .icon_search {
      font-size: 0.4rem;
      color: white;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.header-nav {
  position: absolute;
  top: 0.2rem;
  left: 0.15rem;
  height: 0.6rem;
  width: 0.6rem;
  background-color: black;
  border-radius: 50%;
  line-height: 0.6rem;
  text-align: center;
  opacity: 0.5;
  color: white;
}
</style>
